<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="Effects - Bimrun Engine v3.7" content="width=device-width, initial-scale=1.0">
    <title>Bimrun Engine v3.7</title>
</head>

<body style=" margin: 0; padding: 0; overflow: hidden; ">

    <div id="container" style=" margin: 0; padding: 0; width: 100%; height: 100%; position: absolute; "></div>

    <div id="desc" style=" margin: 10px; padding: 0px; position: absolute; bottom: 0px; ">

        <input type="button" value="开始动画" id="start" />
        <input type="button" value="暂停动画" id="pause" />
        <input type="button" value="继续动画" id="resume" />
        <input type="button" value="停止动画" id="stop" />
        <input type="button" value="重新开始动画" id="repeat" />

        <input type="button" value="查询是否正在播放状态" id="isPlaying" />
        <input type="button" value="查询是否暂停状态" id="isPaused" />
        
    </div>

    <script src='../depends/config.js'></script>
    <script src='../bimrun-engine-v3.7.js'></script>
    <script src='lib/GLTFLoader.js'></script>

    <script>

        let viewer = window.viewer = new Viewer( {

            container: document.getElementById( "container" ),
            indicator: { url: "../resources/aim.png", size: 50 }

        } );

        viewer.createNavCube( viewer.container );

        viewer.loadScene( '101534881', true ); // 关闭加载场景时的自带视角动画

        viewer.flyToPositionTarget(
            { x: 16.571086632185924, y: -10.136795307456774, z: 7.363670640545559 },
            { x: 15.724396548128087, y: -10.143815278280835, z: 6.83163058418912 } );

        var customObj = null;
        var mixerPlayer = null;

        var loader = new GLTFLoader().setPath( './resources/walk_man/' );

        loader.load( 'scene.gltf', function ( gltf ) { //这里是个异步函数

            customObj = gltf.scene;

            customObj.position.set( 10.848171432512851, -9.832656345009925, 2.537992091795333 );  //调整位置到阳台上
            customObj.scale.set( 0.01, 0.01, 0.01 );  //改变模型尺寸
            customObj.rotateX( Math.PI / 2 ); //绕x轴旋转，变换到z-up坐标系
            customObj.updateMatrixWorld( true );
            
            viewer.addCustomObject( customObj );

            //下面为添加旋转和移动动画
            var mixInfo = [
                { position: { x: 12.797505522987244, y: -6.4326848328516455, z: 2.537988940086457 }, angle: { x: Math.PI / 2, y: 0, z: 0 } },
                { position: { x: 7.880417156556682, y: -6.752456267228709, z: 2.5379896655897056 }, angle: { x: Math.PI / 2, y: -Math.PI / 2, z: 0 } },
                { position: { x: 8.78188008118588, y: -13.038968375920788, z: 2.537990354640778 }, angle: { x: Math.PI / 2, y: 0, z: 0 } },
                { position: { x: 12.509887548107677, y: -12.843876224565761, z: 2.5379875708814765 }, angle: { x: Math.PI / 2, y: -Math.PI * 1.5, z: 0 } }
            ];
            var durationArray = [ 0, 5000, 5000, 5000 ];

            mixerPlayer = viewer.createCustomObjectAnimation( customObj, mixInfo, durationArray );  //该方法使用说明详见api文档

        } );


        document.getElementById( "start" ).addEventListener( "click", function () {

            mixerPlayer.start(); // 动画开始

        } );

        document.getElementById( "pause" ).addEventListener( "click", function () {

            mixerPlayer.pause(); // 动画暂停

        } );

        document.getElementById( "resume" ).addEventListener( "click", function () {

            mixerPlayer.resume(); // 动画继续

        } );

        document.getElementById( "stop" ).addEventListener( "click", function () {

            mixerPlayer.stop(); // 动画停止

        } );

        document.getElementById( "repeat" ).addEventListener( "click", function () {

            mixerPlayer.repeat();
            
        });

        document.getElementById( "isPlaying" ).addEventListener( "click", function () {

            alert( mixerPlayer.isPlaying() );

        } );

        document.getElementById( "isPaused" ).addEventListener( "click", function () {

            alert( mixerPlayer.isPaused() );

        } );

    </script>
</body>

</html>